<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
        	#content{
        		width: auto;
        		height: 700px;
        	}
        	.nav{
        		top: 0px;
        		display: block;
        		position: relative;
        		height: 36px;
        		width: 1190px;
        		height: 36px;
        		border-bottom:1px solid #000;
        		margin: 0 auto;
        	}
        	.nav ul li{
			list-style: none;
			float: left;
			font-size: 16px;
			color: #333;
			margin-left: 10px;
			padding: 0 25px;
			font-weight: 700;
			line-height: 40px;
			cursor: pointer;
        	}
        	.dangqian{
			background-color: #2f2f2f;
			line-height: 36px;
			width: 200px;
			height: 36px;
			float: left;
			text-align: center;
			font-size: 16px;
			font-weight: 700;
			color: #fff;

        	}
        	.nav a{
        		text-decoration:none;
        		color: #000;
        	}
			.center{
				width:1050px;
				position: relative;
				height:604px;
			}
			.warp{
				width:530px;
				height:456px;
				position: absolute;
				right:10px;
				top:0px;
			}
			.block{
				background-color: #e9e9e9;
			}
			.price{
				line-height: 30px;
			}
			.hd h1{
				line-height: 1;
				font-size: 16px;
				font-weight: 700;
				color: #000;
			}
			.metatit{
				color: #999;
				font-size: 12px;
				text-align: left;
				float: left;
				width:69px;
				margin: 0 0 0 8px;
			}
			.dd{
				color: #FF0036;
				font-size: 18px;
				font-family: Arial;
			}
			.dd span{
				font-size: 24px;
				font-weight: bolder;
			}
			._meta dt{
				color: #999;
				font-size: 12px;
				text-align: left;
				float: left;
				width:50px;
				margin:0 10px;
			}
			._meta dd{
				font-size: 12px;
				color: #333;
				padding: 0 5px 0 0;
				font-weight: 100;
			}
			.warp ul{
				border:1px dotted #c9c9c9;
				margin:0 20px 0 0;
				padding: 10px 0;
				position: relative;
				overflow: hidden;
				display: flex;
			}
			.warp ul li{
				float: left;
				width:50%;
				text-align: center;
				position: relative;
				line-height: 16px;
				color: #999;
				font-size: 12px;
			}
			.count dt{
					color: #999;
				font-size: 12px;
				text-align: left;
				float: left;
				margin:0 10px;
				line-height: 25px;
				cursor: pointer;
			}
			.count input{
				width:50px;
				height:20px;
				display: inline-block;
				margin-left: 30px;
			}
			.btn{
				width:180px;
				height:40px;
			}
			.btn a{
				background-color: #ff0036;
				color: #fff;
				border: 1px solid #ff0036;
				width:178px;
				height:40px;
				float: left;
				text-align: center;
				text-decoration: none;
				line-height: 40px;
			}
			.xiaotu{
			position: absolute;
			bottom: 130px;
			left:50px;
			}
			.xiaotu li{
				list-style:none;
				float: left;
				padding:30px 5px 0;
				cursor: pointer;
			  
			}
			.xiaotu li img{
			 width:60px;
			  height:60px;
			}
        </style>
        <link rel="stylesheet" href="css/放大镜.css">
    </head>
    <body>
     <div id="content">
     	  <div class="nav">
     	  <div class="dangqian">当前商品</div>
     	  	 <ul>
     	  	 	<li class="index"><a href="index.html">首页</a></li>
     	  	 	<li class="qycg">企业采购</li>
     	  	 	<li class="hypermarket">翻牌</li>
     	  	 </ul>
     	  </div>

     <div class="center">

     	  <div id="box" class="box"> <!--包含详细图和缩略图的盒子-->
		<div class="normal">
			<img src="imgs/jinian1xiaotu .jpg" alt="" id="detailImg" data="imgs/jinian1xiaotu .jpg">
			<div class="magnfier"></div>
		</div>
		<div class="detailed">
			<img src="imgs/jinian1.jpg" alt="">
		</div>
	</div>
    <script src="js/放大镜.js"></script>

		<div class="xiaotu">
		  <ul id = "smUl">
			<li><img src="imgs/cup1.jpg" data="imgs/cup1.jpg"></li>
			<li><img src="imgs/cup2.jpg" data="imgs/cup2.jpg"></li>
			<li><img src="imgs/cup3.jpg" data="imgs/cup3.jpg"></li>
			<li><img src="imgs/cup4.jpg" data="imgs/cup4.jpg"></li>
		</ul>
		</div>
   
     <script type="text/javascript">	
			var ul = document.getElementById('smUl');
			var imgs = ul.getElementsByTagName('img');
			var detailImg = document.getElementById('detailImg');
			var da = detailImg.getAttribute('data');
			for(var i=0;i<imgs.length;i++){
				imgs[i].onmouseover = function(){
					var url = this.getAttribute('data');
				
				var detailImg = document.getElementById('detailImg');
				detailImg.setAttribute('src',url);
				}
				imgs[i].onmouseout = function(){
					detailImg.setAttribute('src',da);
				}
			}
	</script>

		<div class="warp">
			<div class="hd">
				<h1>毛主席小茶缸老式小号陶瓷杯子迷你复古</h1>
			</div>
			<div class="block">
				<dl class="price">
					<dt class="metatit">价格</dt>
					<dd class="dd"> 
					<em>￥</em>
					<span>15</span>
					</dd>
				</dl>
			</div>

			<div class="_meta">
				<dl class="delivery">
				<dt>运费</dt>
				<dd>
				<div class="info">
				<span>满88(20kg以内)包邮</span>
				<a href="javascript:void(0);">配送规则</a>
				</dd>
				</dl>

				<dl class="weight">
				<dt>重量</dt>
				<dd>0.2kg</dd>
				</dl>
				</div>

			<ul>
			<li>月销量100</li>
			<li>送积分5</li>
			</ul>

			  <div class="count">
				<dl>
				<dt>数量</dt>
				<dd>
					<input type="text" value="1">
				</dd>
				</dl>
				</div>

				<div class="btn">
				 <a href="javascript:void(0);">加入购物车</a>
				</div>
			</div>

		</div>
      </div>

     </div>
    </body>
</html>